<template>
  <div class="app-container">
    <!-- 面包屑导航 -->

    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="车型" prop="modelId">
        <el-select
          v-model="queryParams.modelId"
          placeholder="请选择车型"
          clearable
          class="search-input"
        >
          <el-option
            v-for="item in TrailerTypeList"
            :key="item.id"
            :label="item.trailerTypeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="生效日期" prop="effectiveDate">
        <el-date-picker
          v-model="queryParams.effectiveDate"
          type="date"
          placeholder="选择生效日期"
          value-format="yyyy-MM-dd"
          class="search-input"
          clearable
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="失效日期" prop="expiryDate">
        <el-date-picker
          v-model="queryParams.expiryDate"
          type="date"
          placeholder="选择失效日期"
          value-format="yyyy-MM-dd"
          class="search-input"
          clearable
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="trailerList"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="主键ID" align="center" prop="id" /> -->
      <el-table-column label="车型" align="center" prop="modelName">
                       
      </el-table-column>
      <el-table-column label="生效日期" align="center" prop="effectiveDate" />
      <el-table-column label="失效日期" align="center" prop="expiryDate" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改车辆类型收费标准对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="60%"
      append-to-body
      custom-class="trailer-dialog"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="trailer-form"
      >
        <el-divider content-position="center">
          <span class="divider-title">基本信息</span>
        </el-divider>
        <div class="form-container">
          <el-row :gutter="30">
            <el-col :span="8">
              <el-form-item label="车辆类型" prop="vehicleType">
                <el-select
                  v-model="form.modelId"
                  placeholder="请选择车辆类型"
                  clearable
                  class="full-width-input"
                >
                  <el-option
                    v-for="dict in TrailerTypeList"
                    :key="dict.id"
                    :label="dict.trailerTypeName"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-divider content-position="center">
          <span class="divider-title">生效日期</span>
        </el-divider>
        <div class="form-container">
          <!-- 价格生效日期区域 -->
          <div class="date-section">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="生效日期" prop="effectiveDate">
                  <el-date-picker
                    v-model="form.effectiveDate"
                    type="date"
                    placeholder="选择生效日期"
                    value-format="yyyy-MM-dd"
                    class="full-width-input"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="失效日期" prop="expiryDate">
                  <el-date-picker
                    v-model="form.expiryDate"
                    type="date"
                    placeholder="选择失效日期"
                    value-format="yyyy-MM-dd"
                    class="full-width-input"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-divider content-position="center">
            <span class="divider-title">价格配置</span>
          </el-divider>

          <!-- 司机价格模块 -->
          <div class="price-section">
            <div class="section-header driver-header">
              <i class="el-icon-s-custom"></i>
              <span>司机价格</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="subsection">
                  <div class="subsection-header">
                    <i class="el-icon-location-outline"></i>
                    <span>本地救援</span>
                  </div>
                  <div class="compact-form-items">
                    <el-form-item
                      label="起步公里数"
                      prop="localDriverStartingMileage"
                    >
                      <div class="input-with-unit">
                        <el-input-number
                          :precision="1"
                          :step="1"
                          :max="1000"
                          :min="0"
                          v-model="form.localDriverStartingMileage"
                          placeholder="请输入起步公里数"
                          class="full-width-input"
                          controls-position="right"
                        ></el-input-number>
                        <span class="unit-suffix">km</span>
                      </div>
                    </el-form-item>
                    <el-form-item
                      label="起步价格"
                      prop="localDriverStartingPrice"
                    >
                      <div class="input-with-unit">
                        <el-input-number
                          :precision="2"
                          :step="1"
                          :max="10000"
                          :min="0"
                          v-model="form.localDriverStartingPrice"
                          placeholder="请输入起步价格"
                          class="full-width-input"
                          controls-position="right"
                        ></el-input-number>
                        <span class="unit-suffix">元</span>
                      </div>
                    </el-form-item>
                    <el-form-item label="超出单价" prop="localDriverUnitPrice">
                      <div class="input-with-unit">
                        <el-input-number
                          :precision="2"
                          :step="1"
                          :max="1000"
                          :min="0"
                          v-model="form.localDriverUnitPrice"
                          placeholder="请输入超出公里数单价"
                          class="full-width-input"
                          controls-position="right"
                        ></el-input-number>
                        <span class="unit-suffix">元/km</span>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="subsection">
                  <div class="subsection-header">
                    <i class="el-icon-truck"></i>
                    <span>顺风车救援</span>
                  </div>
                  <div class="compact-form-items">
                    <el-form-item
                      label="起步公里数"
                      prop="carpoolDriverStartingMileage"
                    >
                      <div class="input-with-unit">
                        <el-input-number
                          :precision="1"
                          :step="1"
                          :max="1000"
                          :min="0"
                          v-model="form.carpoolDriverStartingMileage"
                          placeholder="请输入起步公里数"
                          class="full-width-input"
                          controls-position="right"
                        ></el-input-number>
                        <span class="unit-suffix">km</span>
                      </div>
                    </el-form-item>
                    <el-form-item
                      label="起步价格"
                      prop="carpoolDriverStartingPrice"
                    >
                      <div class="input-with-unit">
                        <el-input-number
                          :precision="2"
                          :step="1"
                          :max="10000"
                          :min="0"
                          v-model="form.carpoolDriverStartingPrice"
                          placeholder="请输入起步价格"
                          class="full-width-input"
                          controls-position="right"
                        ></el-input-number>
                        <span class="unit-suffix">元</span>
                      </div>
                    </el-form-item>
                    <el-form-item
                      label="超出单价"
                      prop="carpoolDriverUnitPrice"
                    >
                      <div class="input-with-unit">
                        <el-input-number
                          :precision="2"
                          :step="1"
                          :max="1000"
                          :min="0"
                          v-model="form.carpoolDriverUnitPrice"
                          placeholder="请输入超出公里数单价"
                          class="full-width-input"
                          controls-position="right"
                        ></el-input-number>
                        <span class="unit-suffix">元/km</span>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 备注 -->
          <div class="price-section remark-section">
            <div class="section-header">
              <i class="el-icon-document"></i>
              <span>备注信息</span>
            </div>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入备注信息"
                v-model="form.remark"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" icon="el-icon-check"
          >确 定</el-button
        >
        <el-button @click="cancel" icon="el-icon-close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPlateType,
  queryPlatformTrailerType,
  delTrailerPrice,
  addTrailer,
  updateTrailer,
  addType,
  getType,
} from "@/api/api/serviceCar";

export default {
  name: "Trailer",
  dicts: ["vehicle_type", "license_plate_type", "tonnage_type"],
  data() {
    return {
      form: {
        carpoolAgentStartingMileage: 0,
        carpoolAgentStartingPrice: 0,
        carpoolAgentUnitPrice: 0,
        carpoolCustomerStartingMileage: 0,
        carpoolCustomerStartingPrice: 0,
        carpoolCustomerUnitPrice: 0,
        carpoolDriverStartingMileage: 0,
        carpoolDriverStartingPrice: 0,
        carpoolDriverUnitPrice: 0,
        effectiveDate: "",
        expiryDate: "",
        localAgentStartingMileage: 0,
        localAgentStartingPrice: 0,
        localAgentUnitPrice: 0,
        localCustomerStartingMileage: 0,
        localCustomerStartingPrice: 0,
        localCustomerUnitPrice: 0,
        localDriverStartingMileage: 0,
        localDriverStartingPrice: 0,
        localDriverUnitPrice: 0,
        modelId: 0,
      },

      radio: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 车辆类型收费标准表格数据
      trailerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 折叠面板激活的项
      activeNames: ["1", "2", "3"],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        modelId: null,
        effectiveDate: "",
        expiryDate: "",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      TrailerTypeList: [],
    };
  },
  created() {
    this.getList();
    this.getPlatformTrailerType();
  },
  methods: {
    //获取平台可用车型
    getPlatformTrailerType() {
      let data = {};
      queryPlatformTrailerType(data).then((response) => {
        this.TrailerTypeList = response.rows;
      });
    },
    /** 查询车辆类型收费标准列表 */
    getList() {
      this.loading = true;
      listPlateType(this.queryParams).then((response) => {
        this.trailerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        carpoolAgentStartingMileage: 0,
        carpoolAgentStartingPrice: 0,
        carpoolAgentUnitPrice: 0,
        carpoolCustomerStartingMileage: 0,
        carpoolCustomerStartingPrice: 0,
        carpoolCustomerUnitPrice: 0,
        carpoolDriverStartingMileage: 0,
        carpoolDriverStartingPrice: 0,
        carpoolDriverUnitPrice: 0,
        effectiveDate: "",
        expiryDate: "",
        localAgentStartingMileage: 0,
        localAgentStartingPrice: 0,
        localAgentUnitPrice: 0,
        localCustomerStartingMileage: 0,
        localCustomerStartingPrice: 0,
        localCustomerUnitPrice: 0,
        localDriverStartingMileage: 0,
        localDriverStartingPrice: 0,
        localDriverUnitPrice: 0,
        modelId: 0,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加服务商车辆类型收费标准";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getType(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改车辆类型收费标准";
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.id) {
        updateTrailer(this.form).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addTrailer(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除车辆类型收费标准编号为"' + ids + '"的数据项？')
        .then(function () {
          return delTrailerPrice(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "driver/trailer/export",
        {
          ...this.queryParams,
        },
        `trailer_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style scoped>
.trailer-dialog {
  border-radius: 8px;
}

.trailer-form {
  padding: 0 15px;
}

.form-container {
  margin-bottom: 15px;
}

.price-section {
  background-color: #f9fafc;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
  margin-bottom: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.price-section:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 4px;
  background: linear-gradient(135deg, #409eff 0%, #64b5f6 100%);
}

.customer-header {
  background: linear-gradient(135deg, #409eff 0%, #64b5f6 100%);
}

.agent-header {
  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
}

.driver-header {
  background: linear-gradient(135deg, #e6a23c 0%, #f3d19e 100%);
}

.remark-section .section-header {
  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
}

.section-header i {
  margin-right: 8px;
  color: #ffffff;
  font-size: 18px;
}

.date-section {
  margin-bottom: 15px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.subsection {
  background-color: #ffffff;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
  margin-bottom: 8px;
  height: 100%;
}

.subsection-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  padding-bottom: 6px;
  border-bottom: 1px dashed #ebeef5;
}

.subsection-header i {
  margin-right: 6px;
  color: #67c23a;
  font-size: 16px;
}

.compact-form-items .el-form-item {
  margin-bottom: 10px;
}

.compact-form-items .el-form-item:last-child {
  margin-bottom: 0;
}

.divider-title {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.el-divider {
  margin: 20px 0;
}

.unit-label,
.unit-tag {
  display: none;
}

.unit-suffix {
  display: inline-block;
  margin-left: 5px;
  width: 25px;
  color: #909399;
  font-size: 12px;
  line-height: 36px;
  white-space: nowrap;
  text-align: left;
}

.input-with-unit {
  display: flex;
  align-items: center;
  width: 100%;
}

.full-width-input {
  width: 100%;
}

.el-input-number.full-width-input.is-controls-right {
  padding-right: 0 !important;
  width: calc(100% - 30px) !important;
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}

.search-input {
  width: 210px;
}

.breadcrumb-container {
  padding: 10px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
}

.breadcrumb-container .el-breadcrumb {
  font-size: 14px;
}

.breadcrumb-container i {
  margin-right: 5px;
  color: #409eff;
}
</style>
